<template>
  <div
    id="report-container"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-text="加载中"
  >
    <el-button icon="el-icon-download" type="primary" @click="downloadPDF"
      >下载PDF</el-button
    >
    <div ref="reportDetailRef" class="container">
      <!-- 概要 -->
      <div class="card">
        <div class="head">
          <span class="head-left"></span>
          <div class="head-number">概要</div>
          <div class="head-right">
            炉号{{ stoveNumber }} | {{ startTime }} |
            {{ endTime }}
          </div>
        </div>
        <div style="border-bottom: 1px solid rgba(236, 236, 236, 0.5)"></div>
        <div class="head-tag">
          <div class="head-tag-item">
            <div class="tag-title" >
              {{ electricAmount4.kwh }}
            </div>
            <div class="tag-type">合计电量</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ activeElectricity }}</div>
            <div class="tag-type">有功电量</div>
            <div class="tag-bottom">
              <span class="tag-bottom-text"></span>
            </div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ electricAmount4.totalPrice }}</div>
            <div class="tag-type">总电价</div>
          </div>
          <div>
            <div class="tag-title">{{ electricAmount4.price }}</div>
            <div class="tag-type">单价</div>
          </div>
        </div>
        <div style="border-bottom: 1px solid rgba(236, 236, 236, 0.5)"></div>
        <div class="head-tag">
          <div class="head-tag-item">
            <div class="tag-title">{{ stopPower }}</div>
            <div class="tag-type">停电功率</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ stopStoveResistance }}</div>
            <div class="tag-type">停电炉阻</div>
          </div>
          <div class="head-tag-item">
            <div class="tag-title">{{ totalWeight }}</div>
            <div class="tag-type">装炉(吨)</div>
          </div>
          <div>
            <div class="tag-title">{{ totalNumber }}</div>
            <div class="tag-type">装炉(支)</div>
          </div>
        </div>
      </div>
      <!-- 耗电量 -->
      <div class="card">
        <div class="head">
          <span class="head-left"></span>
          <div class="head-number">耗电量</div>
          <div class="head-right">
            {{ electricAmount4.kwh }}kWh | {{ electricAmount4.totalPrice }}元 |
            {{ electricAmount4.price }}元/kWh
          </div>
        </div>
        <div class="tunnel-table">
          <table style="width: 100%">
            <tr class="item">
              <td>电度</td>
              <td>电量</td>
              <td>电量占比</td>
              <td>总价</td>
              <td>总价占比</td>
            </tr>
            <tr v-for="item in electricAmount" :key="item.key">
              <td>{{ item.name }}</td>
              <td>{{ item.kwh }}</td>
              <td>{{ item.kwhPercent }}</td>
              <td>{{ item.totalPrice }}</td>
              <td>{{ item.pricePercent }}</td>
            </tr>
          </table>
        </div>
      </div>
      <!-- 功率VS位移 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">功率VS位移</span>
        </div>
        <div ref="canvans0" v-show="!isShowEcharts"></div>
        <reportEchartsDoubleTwo v-show="isShowEcharts" class="NoEchart" :chartsData="powerAndDisplace" />
      </div>
      <!-- 功率 -->
      <div class="placeholder placeholder2"></div>
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">功率</span>
        </div>
        <div ref="canvans1" v-show="!isShowEcharts"></div>
        <reportEchartsDouble
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="powerAndDisplace1"
        />
      </div>
      <!-- 电阻 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">电阻</span>
        </div>
        <div ref="canvans2" v-show="!isShowEcharts"></div>

        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="graTemper"
        />
      </div>
      <!-- 能量柱 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">能量柱</span>
        </div>
        <div ref="canvans3" v-show="!isShowEcharts"></div>
        <dianliuLuzu
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="newNengliangzhu"
        />
      </div>
      <!-- 电压 -->
      <div class="placeholder placeholder2"></div>
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">电压</span>
        </div>
        <div ref="canvans4" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="stoveAndVA1"
        />
      </div>
      <!-- 电流 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">电流</span>
        </div>
        <div ref="canvans5" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="stoveAndVA2"
        />
      </div>
      <!-- 温度 -->
      <div class="p-chart">
        <div class="p-head">
          <span class="head-left"></span>
          <span style="margin-left: 10px">温度</span>
        </div>
        <div ref="canvans6" v-show="!isShowEcharts"></div>
        <ReportEchart
          v-show="isShowEcharts"
          class="NoEchart"
          :chartsData="stoveAndVA3"
        />
      </div>
      <StoveInfoReport
        @showStove="ShowStoveInfoReport = !ShowStoveInfoReport"
        :startTime="stoveStartTime"
        :endTime="stoveEndTime"
      />
    </div>
  </div>
</template>

<script>
import { getReportData } from '@/api/process'
import ReportEchart from './reportEchart.vue'
import StoveInfoReport from './stoveInfo.vue'
import reportEchartsDouble from './reportEchartsDouble.vue'
import reportEchartsDoubleTwo from './reportEchartsDoubleTwo.vue'
import dianliuLuzu from './dianliuLuzu.vue'
export default {
  components: { ReportEchart, StoveInfoReport, reportEchartsDouble, reportEchartsDoubleTwo,dianliuLuzu },
  props: ['reportItem'],
  data () {
    return {
      ShowStoveInfoReport: true,
      fullscreenLoading: true,
      isShowEcharts: true,
      id: '',
      stoveStartTime: '',
      stoveEndTime: '',
      stoveNumber: '',
      endTime: '',
      startTime: '',
      electricAmount: [],
      electricAmount4: {},
      powerAndDisplace: [],
      powerAndDisplace1:[],
      newNengliangzhu:[], //能量柱
      graTemper: [], // 炉阻
      stoveAndVA1: [], // 电压
      stoveAndVA2: [], // 电流
      stoveAndVA3: [], // 变压器
      selectChart: 1,
      stoveInfo: [],
      stoveReport2: {}, // b炉子
      stoveReport1: {
        electric: {
          startElectricTime: '',
          powerTime: [
            { power: '' }
          ],
          specialPowerTime: [
            { power: '' },
            { power: '' },
            { power: '' },
            { power: '' },
            { power: '' }
          ]
        }
      },
      // 历史报表新增字段
      stopPower: '',
      stopStoveResistance: '',
      stopDisplacement: '',
      totalNumber: '',
      totalWeight: '',
      activeElectricity: ''
    }
  },
  created () {
    if (this.$route.query) {
      this.id = this.$route.query.code
      this.stoveStartTime = this.$route.query.startTime
      this.stoveEndTime = this.$route.query.endTime
      this.GetReportDataById();
    }
  },
  methods: {
    downloadPDF () {
      this.isShowEcharts = false
      this.GeneratepPicture()
      setTimeout(() => {
        this.fullscreenLoading = false
        this.printpage()
      }, 2000)
    },
    GeneratepPicture () {
      this.fullscreenLoading = true
      const mainCanvas = document.getElementsByTagName('canvas')
      for (let i = 0; i < mainCanvas.length; i++) {
        const item = mainCanvas[i]
        const imgRef = this.$refs['canvans' + i]
        const mainImg = new Image()
        const mainImgSrc = item.toDataURL('image/png')
        mainImg.src = mainImgSrc
        mainImg.onload = () => {
          imgRef.innerHTML = `<img style="   width: 100%;height: 100%;" src=${mainImgSrc}>` // 用图片替换 canvas
        }
      }
    },
    printpage () {
      // const oldInnerHtml = window.document.body.innerHTML
      window.document.body.innerHTML = this.$refs.reportDetailRef.innerHTML
      window.print()
      window.location.reload()
      // window.document.body.innerHTML = oldInnerHtml
      return false
    },
    // 获取工艺信息
    async GetReportDataById () {
      const params = {
        stoveTitle: this.id
      }
      const res = await getReportData(params)
      this.stoveNumber = res.data.data.stoveNumber
      this.startTime = res.data.data.startTime
      this.endTime = res.data.data.endTime
      this.electricAmount = res.data.data.electricAmount
      this.electricAmount4 = res.data.data.electricAmount[4]
      this.powerAndDisplace = JSON.parse(JSON.stringify(res.data.data.powerAndDisplace.source))// 功率位移
      this.powerAndDisplace1 = JSON.parse(JSON.stringify(res.data.data.powerAndDisplace.source))
      this.stoveAndVA1 = res.data.data.workingData.source1 // 直流电压
      this.stoveAndVA2 = res.data.data.workingData.source2 // 直流电流
      this.stoveAndVA3 = res.data.data.workingData.source3 // 变压器
      this.graTemper = res.data.data.workingData.source4 // 炉阻

       //能量柱
       let mylsArr = []
      mylsArr = JSON.parse(JSON.stringify(res.data.data.workingData.source4));
      mylsArr[0][2] = "电流";
      mylsArr[0][3] = "I²R";
      console.log(res.data.data.workingData);
      let aa = res.data.data.workingData.source4.length;
      // let bb = res.data.data.workingData.source2.length;
      for (let i = 1; i < aa; i++) {
        let ab = res.data.data.workingData.source2[i][1]
        mylsArr[i][2] = ab
        mylsArr[i][3] =(ab*ab*mylsArr[i][1]).toFixed(3)
      }
      this.newNengliangzhu = mylsArr
      console.log(this.newNengliangzhu,'11111');

      // 加载完毕 设置为false
      this.fullscreenLoading = false
      // 历史报表新增字段
      this.activeElectricity = res.data.data.activeElectricity // 有功电量
      this.totalWeight = res.data.data.totalWeight// 总重
      this.totalNumber = res.data.data.totalNumber// 总支数
      this.stopDisplacement = res.data.data.stopDisplacement // 停电位移
      this.stopStoveResistance = res.data.data.stopStoveResistance// 停电炉阻
      this.stopPower = res.data.data.stopPower// 停电功率
    },
  }
}
</script>

<style>
@media print {
  body {
    /* -webkit-print-color-adjust: exact;
    -moz-print-color-adjust: exact;
    -ms-print-color-adjust: exact; */
    margin: 1cm;
    page-break-before: auto;
  }
  @page {
    margin: 0;
  }
  .NoEchart {
    display: none;
  }
  /* 这是占位元素分隔 页面 */
  .placeholder {
    page-break-before: always;
    height: 30px;
  }
  .placeholder2 {
    height: 10px;
  }
  .placeholder3 {
    height: 30px;
  }
}
</style>
<style   scoped>
#report-container {
  overflow: auto;
  height: 100%;
  width: 100%;
}
.container {
  padding: 20px;
  margin: 0 auto;
  display: block;
  width: 740px;
  background: #fff;
}
.head {
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  margin-top: 14px;
  &-left {
    width: 5px;
    height: 30px;
    background-color: #01bb70;
  }
  &-number {
    margin-left: 8px;
    height: 25px;
    line-height: 25px;
  }
  &-right {
    margin-left: auto;
    padding: 0 10px;
    background-color: #f2f2f2;
    height: 25px;
    border-radius: 12px;
    line-height: 25px;
    text-align: center;
  }
}
.p-head {
  height: 40px;
  display: flex;
  align-items: center;
  margin-top: 30px;
  &-status {
    margin-left: 150px;
    padding: 7px;
    border-radius: 15px;
    background-color: #f2f2f2;
  }
  &-left {
    width: 5px;
    height: 30px;
    background-color: #01bb70;
  }
  &-right {
    margin-left: auto;
    padding: 0 10px;
    background-color: #f2f2f2;
    height: 25px;
    border-radius: 12px;
    line-height: 25px;
    text-align: center;
  }
}
table {
  border-collapse: collapse;
}
tr td {
  padding: 10px;
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid rgba(236, 236, 236, 0.5);
}
.head-tag {
  background-color: #ffffff;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: 80px;
  justify-items: center;
  align-items: center;
  font-size: 14px;
  &-item {
    position: relative;
  }
  .head-tag-item::before {
    content: "";
    position: absolute;
    right: -60px;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: #d9d9d9;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .tag-title {
    color: #01bb70;
    text-align: center;
  }
  .tag-type {
    margin-top: 10px;
    width: 60px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #9d9d9d;
  }
  .tag-bottom {
    color: #bebebe;
    text-align: center;
  }
  .tag-bottom-text {
    color: #55c0bc;
  }
}
</style>
